
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<!-- The HTML 4.01 Transitional DOCTYPE declaration-->
<!-- above set at the top of the file will set     -->
<!-- the browser's rendering engine into           -->
<!-- "Quirks Mode". Replacing this declaration     -->
<!-- with a "Standards Mode" doctype is supported, -->
<!-- but may lead to some differences in layout.   -->

<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    
    <!--                                           -->
    <!-- Any title is fine                         -->
    <!--                                           -->
    <title>Hello App Engine</title>

	<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.7.0/build/fonts/fonts-min.css" />
	<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.7.0/build/datatable/assets/skins/sam/datatable.css" />
	<script type="text/javascript" src="http://yui.yahooapis.com/2.7.0/build/yahoo-dom-event/yahoo-dom-event.js"></script>

	<script type="text/javascript" src="http://yui.yahooapis.com/2.7.0/build/connection/connection-min.js"></script>
	<script type="text/javascript" src="http://yui.yahooapis.com/2.7.0/build/json/json-min.js"></script>
	<script type="text/javascript" src="http://yui.yahooapis.com/2.7.0/build/element/element-min.js"></script>
	<script type="text/javascript" src="http://yui.yahooapis.com/2.7.0/build/datasource/datasource-min.js"></script>
	<script type="text/javascript" src="http://yui.yahooapis.com/2.7.0/build/datatable/datatable-min.js"></script>



  </head>

  <!--                                           -->
  <!-- The body can have arbitrary html, or      -->
  <!-- you can leave the body empty if you want  -->
  <!-- to create a completely dynamic UI.        -->
  <!--                                           -->
  <body class="yui-skin-sam">
    <h1>Option Explorer</h1>
	
<script>

function getDataFromServer() {
	var quote = document.quoteForm.quote.value;
	var range = document.quoteForm.range.value;
	var fut = document.quoteForm.ahead.value;
	var reqStr = "q=" + quote + "&range=" + range + "&ahead=" + fut; 
	dataSource.sendRequest(reqStr, callbackObj);
}

</script>
	
	<form name="quoteForm">
	  <b>Ticker:<b> <input type="text" name="quote" value="WMT"/> <br/>
	  <b>Range<input type="text" name="range" value="15"/> <br/>
	  <b>Look Ahead: <input type="text" name="ahead" value="180"/> <br/>
	  <input type="button" onclick="getDataFromServer()" value="Explore"/>
	</form>
	
	<div id="analysisData"></div> 
	
    <script type="text/javascript">

   	    var myPercentFormatter = function (elCell, oRecord, oColumn, oData) {
			var val = oData;
			elCell.innerHTML = val + "%";
			return;
   	    }
    
        var columnDefs = [                        
            {key:"Ticker", label:"Ticker"},
            {key:"Call", label:"Call Option"},
            {key:"Put", label:"Put Option"},
            {key:"AmtReturn", label:"ROE", formatter:"currency", sortable:"true"},
            {key:"PercentReturn", label:"%ROE", formatter:myPercentFormatter, sortable:"true"},
            {key:"AnnualReturn", label:"Annual Return", formatter:myPercentFormatter, sortable:"true"},
            {key:"PriceOnAssign", label:"Cost Basis(on Assign)", formatter:"currency", sortable:"true"}
        ];

        var dataSource = new YAHOO.util.DataSource("analyze?");
        dataSource.responseType = YAHOO.util.DataSource.TYPE_JSON;
        dataSource.connXhrMode = "queueRequests";
        dataSource.responseSchema = {
            resultsList: "ResultSet.Result",
            fields: [{key:"Ticker", parser:"string"},
                     {key:"Call", parser:"string"},
                     {key:"Put", parser:"string"},
                     {key:"AmtReturn", parser:"number"},
                     {key:"PercentReturn", parser:"number"},
                     {key:"AnnualReturn", parser:"number"},
                     {key:"PriceOnAssign", parser:"number"}]
                     
        };

        var dataTable = new YAHOO.widget.DataTable("analysisData", columnDefs,
                dataSource, {initialRequest:"q=WMT&range=15&fut=180"});

        var successHandler = function() {
            this.set("sortedBy", null);
            this.onDataReturnInitializeTable.apply(this,arguments);
        };
        var failureHandler = function() {
            this.showTableMessage(YAHOO.widget.DataTable.MSG_ERROR, YAHOO.widget.DataTable.CLASS_ERROR);
            this.onDataReturnInitializeTable.apply(this,arguments);
        };
        var callbackObj = {
            success : successHandler,
            failure : failureHandler,
            scope : dataTable
        };
</script>


  </body>
</html>
